<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/static/lib/layui-v2.8.3/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/static/index/css/public.css" media="all">
  <style>
    body {
      background-color: #ffffff;
    }
  </style>
</head>
<body>
<div class="layui-form layuimini-form">
  <div class="layui-form-item">
    <label class="layui-form-label required">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="username" lay-verify="required|username" lay-reqtext="用户名不能为空" placeholder="请输入用户名" value="" class="layui-input">
      <tip>填写自己管理账号的名称。</tip>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label required">邮箱</label>
    <div class="layui-input-block">
      <input type="email" name="email" lay-verify="required|email" lay-reqtext="邮箱不能为空" placeholder="请输入邮箱地址" value="" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label required">密码</label>
    <div class="layui-input-block">
      <input type="password" name="password" lay-verify="required|password" lay-reqtext="密码不能为空" placeholder="请输入密码" value="" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label required">确认密码</label>
    <div class="layui-input-block">
      <input type="password" name="repass" lay-verify="required|repass" lay-reqtext="确认密码不能为空" placeholder="请再次输入密码" value="" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label required">真实姓名</label>
    <div class="layui-input-block">
      <input type="text" name="name" lay-verify="required|name" lay-reqtext="真实姓名不能为空" placeholder="请输入真实姓名" value="" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label required">手机</label>
    <div class="layui-input-block">
      <input type="number" name="phone" lay-verify="required|phone" lay-reqtext="手机不能为空" placeholder="请输入手机" value="" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
    </div>
  </div>
</div>
<!--上下文路径-->
<script>
  let ctx='[[${#httpServletRequest.getContextPath()}]]';
</script>
<script src="/static/lib/layui-v2.8.3/layui/layui.js" charset="utf-8"></script>
<script th:src="@{/static/lib/captcha/js/crypto-js.js}" charset="utf-8"></script>
<script th:src="@{/static/lib/captcha/js/ase.js}" charset="utf-8"></script>
<script>
  layui.use(['form'], function () {
    var form = layui.form,
            layer = layui.layer,
            $ = layui.$;


//定义验证规则，如一下验证用户名和密码为例
    form.verify({
      // 函数写法
      // 参数 value 为表单的值；参数 item 为表单的 DOM 对象
      username: function(value, item){
        if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
          return '用户名不能有特殊字符';
        }
        if(/(^_)|(__)|(_+$)/.test(value)) return '用户名首尾不能出现 _ 下划线';
        if(/^\d+$/.test(value)) return '用户名不能全为数字';
        if (value.length < 5) return '用户名长度不能小于5位';
      },
      // 数组写法。
      // 数组中两个成员值分别代表：[正则表达式、正则匹配不符时的提示文字]
      password: [/^[\S]{6,12}$/, '密码必须为6到12位的非空字符'],
      repass: function(value, item){
        // password 的 value 值
        let pass = $("input[name=password]").val();
        if (value != pass){
          return "两次密码输入不一致";
        }
      },
      name: function (value, item) {
        if(!new RegExp("^[\u4e00-\u9fa5]{2,10}$").test(value)){
          return '真实姓名应该为 2 到 10 个汉字';
        }
      }
    });



    //监听提交
    form.on('submit(saveBtn)', function (data) {
      data=data.field;
      //密码加密
      let key = CryptoJS.lib.WordArray.random(16).toString();
      data.key = key;
      data.password = aesEncrypt(data.password, key);

      // 发送请求
      fetch(ctx + '/sysuser/add',{
        headers: {
          'Content-Type': 'application/json'
        },
        method: 'POST',
        body: JSON.stringify(data)
      }).then(function (resp){
        //发送完请求json
        return resp.json();
        //二次回调
      }).then(function(json){
        //添加成功，
        if (json.code == 200){
          var index = layer.alert('添加成功', {
            title: '操作成功',
          }, function () {
            // 关闭弹出层
            layer.close(index);

            // 刷新父页面表格
            parent.layui.table.reload('currentTableId');

            var iframeIndex = parent.layer.getFrameIndex(window.name);
            parent.layer.close(iframeIndex);

          });
        } else {
          layer.msg(json.msg, {icon: 2, time: 1000});
        }
      }).catch(function (error) {
        layer.msg(error.msg, {icon: 2, time: 1000});
      });



      return false;
    });

    // 失去焦点时，验证用户名是否存在
    // $("input[name=username]").blur(function () {
    //   let username = $(this).val();
    //   if (username == ''){
    //     return false;
    //   }
    //   fetch(ctx + '/sysuser/checkUsername?username=' + username).then(function (resp){
    //     return resp.json();
    //   }).then(function(json){
    //     if (json.code == 200){
    //       layer.msg(json.msg, {icon: 1, time: 1000});
    //     } else {
    //       layer.msg(json.msg, {icon: 2, time: 1000});
    //     }
    //   }).catch(function (error) {
    //     layer.msg(error.msg, {icon: 2, time: 1000});
    //   });
    // });
  });
</script>
</body>
</html>